<template>
	<div class="content">
		<div class="login">
			<img :src="require('../../static/public/images/login/milogo2x.png')" alt="">
			<h4 v-text="`小米账号登录`"></h4>
		</div>
		<Password v-show="!type"></Password>
		<Note v-show="type"></Note>
		<MiButton v-text="text" :handler="changeType"></MiButton>
	</div>
</template>

<script type="text/ecmascript-6">
	import Password from "../components/PasswordLogin.vue";
    import Note from "../components/MessageLogin.vue";
    import MiButton from "../components/MiButton";
    export default {
		components:{
            Password,
            Note,
            MiButton
		},
	    data(){
		    return{
		        type:true
		    };
	    },
	    computed:{
		    text(){
		        return this.type ? "用户名密码登录" :"手机短信登录/注册"
		    }
	    },
	    methods:{
		    changeType(){
		        this.type = !this.type;
		    }
	    },
	    created(){

	    }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
	.content
		width 100%
		height:100%
		.login
			text-align center
			font-size 0
			padding-top  0.6rem
			h4
				font-size 0.40rem
				padding-top 0.3rem
				color black
		.button
			background-color white
			color #000
</style>